<template>
  <div class="fruit">
    <my-header title="水果列表"></my-header>
    <div class="content">
      <!-- <my-card @numJian="getCount1" @numAdd="getCount" v-for="item in fruits" :key="item.id" :id="item.id" :count="item.count" :state="item.state" :fruitName="item.fruit"></my-card> -->
      <my-card v-for="item in fruits" v-model:fruitCount="item.count" :key="item.id" :state="item.state" :fruitName="item.fruit"></my-card>
    </div>
    <div class="footer">
      <div class="fo-left">数量:{{total}}</div>
      <div class="fo-right">
        总价：{{conclusion}}
        <button class="btn" @click="settlement">结算</button>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from '../header/Header.vue';
import MyCard from './Card.vue';
export default {
  name: 'MyFruit',
  components: {
    MyHeader,
    MyCard
  },
  data() {
    return {
      fruits: [
        { id: 1, fruit: '橘子', pic: '', price: 4, count: 1, state: true },
        { id: 2, fruit: '香蕉', pic: '', price: 3, count: 1, state: false },
        { id: 3, fruit: '香梨', pic: '', price: 3.5, count: 1, state: false },
        { id: 4, fruit: '苹果', pic: '', price: 5, count: 1, state: false },
        { id: 5, fruit: '榴莲', pic: '', price: 12, count: 1, state: false },
        { id: 6, fruit: '李子', pic: '', price: 6, count: 3, state: true }
      ]
    };
  },
  computed: {
    total() {
      let t = 0;
      this.fruits.forEach(i => {
        if (i.state) {
          t += i.count;
        }
      });
      return t;
    },
    conclusion() {
      let t = 0;
      this.fruits
        .filter(x => x.state)
        .forEach(i => {
          t += i.price * i.count;
        });
      return t;
    }
  },
  methods: {
    settlement() {}
  }
};
</script>

<style scoped>
.footer {
  height: 50px;
  width: 100%;
  line-height: 50px;
  background-color: rgb(230, 225, 225);
  color: black;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.content {
  margin-top: 70px;
}
.fo-left {
  display: inline;
  margin-left: 10px;
}
.fo-right {
  display: inline;
  margin-left: 220px;
}
.btn {
  margin-left: 20px;
  background-color: skyblue;
  box-shadow: none;
}
</style>